@import "../common/const.scss";
@import "../common/mixin.scss";

.sp-user {
	&:after {
		content: "";
		@include size(100%, 100%);
		@include absolute();
		@include background($loginBack);
		transition: all 0.3s;
	}

	&__ {
		&form {
			@include size(776px, 493px);
			padding: 72px 169px 0;
			box-shadow: 23px 28px 103px rgba(0, 0, 0, 0.1);

			& > h2 {
				font-family: "alih";
				margin-bottom: 24px;
				@include font(36px, 44px, null, null);
			}

			& > p {
				display: block;
				margin-bottom: 38px;
				@include font(18px, 28px, null, null);
			}
		}

		&logo {
			@include size(154px, 98px);
			@include background($loginLogo);
			@include absolute(null, null, 11px, 50%, 15);
			margin-left: -77px;
		}
	}

	.n-card {
		width: 200px;
	}

	.n-card__content {
		padding: 0 !important;
	}
}

// 黑夜模式
.dark {
	.sp-user {
		&:after {
			opacity: 0.3;
		}
	}
}

// 移动端样式
@media screen and (max-width: 750px) {
	.sp-user {
		&:after {
			content: "";
			opacity: 0;
		}

		&__ {
			&form {
				@include flex(center, center, column);
				@include size(100%, 100%);
				@include absolute(0, null, null, 0);
				padding: 0 45px;

				& > p {
					font-size: 16px;
				}

				& > p,
				& > h2,
				& > main {
					width: 100%;
				}
			}
		}

		.n-card {
			position: absolute !important;
			width: 100% !important;
			height: 100% !important;
			border-radius: 0;
		}
	}
}
